<template>
  <el-dialog :title="formDw.id?'修改点位':'新增点位'" :visible="visible" width="50%" @close="closeFn">
    <span>
      <el-form :model='formDw' :rules="dwRules" ref="dwFprm">
        <el-form-item label="点位名称:" prop="name">
          <el-input maxlength="15" show-word-limit v-model="formDw.name"></el-input>
        </el-form-item>
        <el-form-item label="所在区域:" prop="regionId">
          <el-select placeholder="请选择" v-model="formDw.regionId">
            <el-option :label="item.name" :value="item.id"
            v-for="item in quyuList" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属商圈:" prop="businessId">
          <el-select placeholder="请选择" v-model="formDw.businessId">
            <el-option :label="item.name"
            :value="item.id"
            v-for="item in shangquanList" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="归属合作商:" prop="ownerId">
          <el-select placeholder="请选择" v-model="formDw.ownerId" @change='hezuoshang'>
            <el-option :label="item.name" :value="item.id"
            v-for="item in hezuoshangList" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址:"  prop='areaCode'>
          <el-cascader
            ref="citycascader"
            size="large"
            :options="options"
            v-model="selectedOptions"
            @change="handleChange"
          >
          </el-cascader>

        </el-form-item>
        <el-form-item prop="addr">
           <el-input
            type="textarea"
            :rows="5"
            placeholder="请输入详细地址"
            maxlength="60" show-word-limit
            v-model="formDw.addr"
          >
          </el-input>
        </el-form-item>
      </el-form>
    </span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeFn">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getuserId } from '@/utils/localStorage'
import { regionData, TextToCode } from 'element-china-area-data'
import { getShangquan, getHezuoshang, addDw, xgDw } from '@/api/dianweiguanli/dianwei'
import { getQylist } from '@/api/dianweiguanli/quyu'
export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    list: {
      type: Array,
      required: true
    },
    dwXzList: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      formDw: {
        createUserId: getuserId(),
        name: '',
        regionId: '',
        businessId: '',
        ownerId: '',
        ownerName: '',
        addr: '',
        areaCode: ''
      },
      options: regionData,
      selectedOptions: [], // 储存省市区得id值
      shangquanList: [],
      quyuList: [],
      hezuoshangList: [],
      cityName: '',
      dwRules: {
        name: [
          { required: true, message: '请输入点位名称', trigger: 'blur' },
          { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
        ],
        regionId: [
          { required: true, message: '请选择所在区域', trigger: 'change' }
        ],
        businessId: [
          { required: true, message: '请选择所属商圈', trigger: 'change' }
        ],
        ownerId: [
          { required: true, message: '请选择归属合作商', trigger: 'change' }
        ],
        areaCode: [
          { required: true, message: '请选择详细地址', trigger: 'change' }
        ],
        addr: [
          { required: true, message: '请输入详细地址', trigger: 'blur' },
          { min: 2, max: 60, message: '长度在 2 到 60 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.shangquan()
    // this.xgContent()
  },
  mounted () {},
  methods: {
    // 关闭弹窗
    closeFn () {
      this.$emit('update:visible', false)
      this.$refs.dwFprm.resetFields()
      this.formDw = {
        createUserId: getuserId(),
        name: '',
        regionId: '',
        businessId: '',
        ownerId: '',
        ownerName: '',
        addr: '',
        areaCode: ''
      }
      this.selectedOptions = []
    },
    // 省市区id
    handleChange (value) {
      this.formDw.areaCode = value[2]
      this.cityName = this.$refs.citycascader.getCheckedNodes()[0].pathLabels.join('-')
      // console.log(this.cityName)
      // console.log('this.options :>> ', this.$refs.citycascader.getCheckedNodes()[0].pathLabels)
    },
    async shangquan () {
      // 商圈
      const res = await getShangquan()
      // console.log('res :>> ', res)
      this.shangquanList = res.data
      // 区域
      const quRes = await getQylist({ pageIndex: 1, pageSize: 1000 })
      // console.log('quRes :>> ', quRes)
      this.quyuList = quRes.data.currentPageRecords.filter(item => item.name)
      // 合作商
      const hzRes = await getHezuoshang({ pageIndex: 1, pageSize: 1000 })
      // console.log('hzRes :>> ', hzRes)
      this.hezuoshangList = hzRes.data.currentPageRecords
    },
    // 根据合作商id拿到合作商名字
    hezuoshang () {
      this.formDw.ownerName = this.hezuoshangList.find(item => item.id === this.formDw.ownerId).name
    },
    // 完成新增与修改功能
    async submit () {
      try {
        await this.$refs.dwFprm.validate()
        this.formDw.addr = this.cityName + '-' + this.formDw.addr
        if (this.formDw.id) {
          await xgDw({ ...this.formDw })
          this.$message.success('修改成功')
        } else {
          await addDw(this.formDw)
          this.$message.success('添加成功')
        }
        this.$emit('gengxin')
        this.closeFn()
      } catch (err) {
        console.log(err)
        this.$message.error(err.response.data)
      }
    },
    // 修改页面
    xgContent (row) {
      // console.log('row :>> ', row)
      this.formDw = row
      const { addr } = this.dwXzList.find(item => item.id === row.id)
      const str = addr
      const str1 = addr
      // console.log('str :>> ', str) // 北京市-市辖区-昌平区-三旗百汇购物中心ss
      const arr = str.split('-')
      this.cityName = str1.split('-').splice(0, 3).join('-')
      // [TextToCode[row.province].code,TextToCode[row.province].[row.county].code,TextToCode[row.province].[row.county].[row.area].code]
      this.selectedOptions = [TextToCode[arr[0]].code, TextToCode[arr[0]][arr[1]].code, TextToCode[arr[0]][arr[1]][arr[2]].code]
    }
  }
}
</script>
<style lang="less" scoped>
.el-dialog{
.el-form {
  display: flex;
  flex-direction: column;
  padding-right: 100px;
  .el-form-item {
    margin-left: auto;
    .el-form-item__label{
      display: block;
      width: 140px;
    }

  }
}
.el-button{
  background-color: #f3e7e1;
  border-color: #f3e7e1;
  color: #655b56
}
.el-button--primary{
  background-color: #ff6d29;
  border-color: #ff6d29;
  color: #fff;
}
}

</style>
